<template>
	<view class="member-page">
		<!-- 非会员头部 -->
		<view v-if="!memberInfo.isMember" class="header non-member">
			<text class="title">加入海D捞会员</text>
			<button class="join-btn" @click="joinMember">立即加入</button>
		</view>

		<!-- 会员头部 -->
		<view v-else class="header member" :class="getMemberClass(memberInfo.memberLevel)">
			<text class="member-title">尊敬的{{ getMemberLevelName(memberInfo.memberLevel) }}会员</text>
		</view>

		<!-- 会员权益 -->
		<view class="benefits-section">
			<text class="section-title">会员专属权益</text>
			<view class="benefits-list">
				<text class="benefit-item">🎁 专属会员优惠券，每月免费领取</text>
				<text class="benefit-item">💰 购物享受会员折扣，最高可达8折</text>
				<text class="benefit-item">🚚 免费配送服务，订单满99元免运费</text>
				<text class="benefit-item">⭐ 积分翻倍奖励，消费1元得2积分</text>
				<text class="benefit-item">🎉 生日专属礼包，生日月享受特别优惠</text>
				<text class="benefit-item">👑 优先客服服务，专属客服通道</text>
				<text class="benefit-item">📦 会员专享商品，限时特价抢购</text>
				<text class="benefit-item">🎫 活动优先参与权，新活动第一时间通知</text>
				<text class="benefit-item">💎 等级升级奖励，升级即送大额优惠券</text>
				<text class="benefit-item">🏆 会员专属标识，彰显尊贵身份</text>
				<text class="benefit-item">🎁 每月会员日，额外折扣和礼品</text>
				<text class="benefit-item">📱 专属会员APP，更多功能等你发现</text>
			</view>
		</view>

		<!-- 会员等级优惠券 -->
		<view class="coupons-section">
			<text class="section-title">会员等级优惠券</text>
			<view class="level-coupons" v-for="level in memberInfo.levelCoupons" :key="level.level">
				<view class="level-header" :class="getLevelClass(level.level)">
					<text class="level-name">{{ level.levelName }}会员专享</text>
				</view>
				<view class="coupons-list">
					<view class="coupon-item" v-for="coupon in level.coupons" :key="coupon.id">
						<view class="coupon-left">
							<text class="coupon-amount">¥{{ Number(coupon.discountAmount).toFixed(0) }}</text>
							<text class="coupon-threshold" v-if="coupon.thresholdAmount > 0">满{{ coupon.thresholdAmount }}可用</text>
							<text class="coupon-threshold" v-else>无门槛</text>
						</view>
						<view class="coupon-right">
							<text class="coupon-name">{{ coupon.name }}</text>
							<text class="coupon-desc">{{ coupon.description || '—' }}</text>
							<button 
								class="claim-btn" 
								:class="{ claimed: coupon.claimed, disabled: !coupon.canClaim }"
								:disabled="coupon.claimed || !coupon.canClaim"
								@click="claimCoupon(coupon.memberLevelCouponId, coupon)"
							>
								{{ coupon.claimed ? '已领取' : (coupon.canClaim ? '立即领取' : '等级不足') }}
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'

export default {
	data() {
		return {
			memberInfo: {
				isMember: false,
				memberLevel: 'NONE',
				levelCoupons: []
			}
		}
	},
	onLoad() {
		this.loadMemberInfo()
	},
	methods: {
		async loadMemberInfo() {
			try {
				const res = await api.getMemberInfo()
				if (res.code === 0) {
					this.memberInfo = res.data
				}
			} catch (e) {
				console.error('加载会员信息失败', e)
			}
		},
		async joinMember() {
			uni.showLoading({ title: '加入中...' })
			try {
				const res = await api.joinMember()
				uni.hideLoading()
				if (res.code === 0) {
					uni.showToast({ title: '加入会员成功' })
					this.loadMemberInfo()
				} else {
					uni.showToast({ icon: 'none', title: res.message || '加入失败' })
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({ icon: 'none', title: '加入失败' })
			}
		},
		async claimCoupon(memberLevelCouponId, coupon) {
			uni.showLoading({ title: '领取中...' })
			try {
				const res = await api.claimMemberCoupon(memberLevelCouponId)
				uni.hideLoading()
				if (res.code === 0) {
					uni.showToast({ title: '领取成功' })
					this.loadMemberInfo()
				} else {
					uni.showToast({ icon: 'none', title: res.message || '领取失败' })
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({ icon: 'none', title: '领取失败' })
			}
		},
		getMemberLevelName(level) {
			const map = {
				'BRONZE': '青铜',
				'SILVER': '白银',
				'GOLD': '黄金',
				'PLATINUM': '黑金'
			}
			return map[level] || '普通'
		},
		getMemberClass(level) {
			return `member-${level.toLowerCase()}`
		},
		getLevelClass(level) {
			return `level-${level.toLowerCase()}`
		}
	}
}
</script>

<style>
.member-page {
	min-height: 100vh;
	background: #f5f5f5;
}

/* 非会员头部 */
.header.non-member {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	padding: 60rpx 30rpx;
	text-align: center;
}

.header.non-member .title {
	font-size: 56rpx;
	font-weight: 700;
	color: #fff;
	text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
	letter-spacing: 4rpx;
	display: block;
	margin-bottom: 40rpx;
}

.join-btn {
	background: #fff;
	color: #4facfe;
	border-radius: 50rpx;
	padding: 20rpx 60rpx;
	font-size: 32rpx;
	font-weight: 600;
	border: none;
}

/* 会员头部 */
.header.member {
	padding: 60rpx 30rpx;
	text-align: center;
}

.member-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #fff;
	text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 4rpx;
}

.member-bronze {
	background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
}

.member-silver {
	background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
}

.member-gold {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
}

.member-platinum {
	background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
}

.member-platinum .member-title {
	color: #ffd700;
}

/* 会员权益 */
.benefits-section {
	background: #fff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #333;
	display: block;
	margin-bottom: 30rpx;
}

.benefits-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.benefit-item {
	font-size: 28rpx;
	color: #666;
	line-height: 1.8;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.benefit-item:last-child {
	border-bottom: none;
}

/* 优惠券区域 */
.coupons-section {
	margin: 20rpx;
}

.level-coupons {
	margin-bottom: 30rpx;
}

.level-header {
	padding: 20rpx 30rpx;
	border-radius: 16rpx 16rpx 0 0;
}

.level-name {
	font-size: 32rpx;
	font-weight: 700;
	color: #fff;
}

.level-bronze {
	background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
}

.level-silver {
	background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
}

.level-gold {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
}

.level-platinum {
	background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
}

.level-platinum .level-name {
	color: #ffd700;
}

.coupons-list {
	background: #fff;
	border-radius: 0 0 16rpx 16rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.coupon-item {
	display: flex;
	gap: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	background: #f9f9f9;
	border-radius: 12rpx;
}

.coupon-item:last-child {
	margin-bottom: 0;
}

.coupon-left {
	width: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
	border-radius: 12rpx;
	padding: 20rpx;
}

.coupon-amount {
	font-size: 48rpx;
	font-weight: 800;
	color: #fff;
}

.coupon-threshold {
	font-size: 22rpx;
	color: #fff;
	margin-top: 8rpx;
	opacity: 0.9;
}

.coupon-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.coupon-name {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.coupon-desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 12rpx;
}

.claim-btn {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	color: #fff;
	border-radius: 8rpx;
	padding: 12rpx 24rpx;
	font-size: 26rpx;
	border: none;
	align-self: flex-start;
}

.claim-btn.claimed {
	background: #ccc;
}

.claim-btn.disabled {
	background: #e0e0e0;
	color: #999;
}
</style>

